<!-- 意见反馈 -->
<template>
	<view>
		<u-navbar :isFixed="true" title="意见反馈" :borderBottom="false"></u-navbar>
		<view class="contain">
			<view class="title">选择问题类别:</view>
			<view class="sort flex">
				<view class="item" :class="feedback_type==index?'opt':''" v-for="(item,index) in type"
					@click="settype(index)">{{item}}</view>
			</view>
			<view class="title">
				<text>*</text>请描述问题:
			</view>
			<textarea placeholder="您好,为了更好地解决您的问题,请详细描述您遇到的问题" v-model="content" />


			<view class="title">
				请填写联系方式: (选填)
			</view>
			<textarea placeholder="请填写联系人姓名及联系人电话" v-model="contact" />

			<view class="btn" @click="submits()">提交反馈</view>
		</view>
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				feedback_type: -1,
				type: {},
				content: "",
				contact: '', //联系方式
			}
		},
		onLoad(options) {
			_this = this
			_this.getdata()
		},
		methods: {
			// 获取数据
			getdata() {
				_this.$api.get("feedbacktype", {}).then(data => {
					_this.type = data
					console.log(data)
				});
			},
			settype(key) {
				_this.feedback_type = key
			},
			submits() {
				if (_this.feedback_type == -1) {
					uni.showToast({
						title: "请选择反馈类型",
						icon: "none"
					})
				} else if (_this.content.length < 1) {
					uni.showToast({
						title: "请填写反馈内容",
						icon: "none"
					})
				} else {
					_this.$api.post("feedback", {
						content: _this.content,
						feedback_type: _this.feedback_type,
						tel: _this.contact
					}).then(data => {
						uni.showToast({
							title: "提交成功,感谢您的反馈",
							icon: 'success',
							duration: 2000,
							success: function() {
								setTimeout(function() {
									uni.navigateBack({
										delta: 1
									})
								}, 1000);
							}
						})

					});
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.contain {
		padding: 0 30rpx;
	}

	.title {
		margin-top: 60rpx;
		font-size: 30rpx;

		text {
			color: red;
			line-height: 30rpx;
		}
	}

	.sort {
		margin-top: 35rpx;

		.item {
			width: 135rpx;
			height: 70rpx;
			line-height: 68rpx;
			margin-right: 25rpx;
			text-align: center;
			border: 1rpx solid #2f2f2f;
			border-radius: 35rpx;
		}

		.opt {
			border-color: #05adbb;
			color: #05adbb;
		}
	}

	textarea {
		width: 690rpx;
		height: 257rpx;
		background: #ffffff;
		border: 1rpx solid #c1c1c1;
		border-radius: 15rpx;
		padding: 20rpx;
		margin-top: 15rpx;
		box-sizing: border-box;
		font-size: 28rpx;
	}

	.btn {
		width: 670rpx;
		height: 88rpx;
		background: linear-gradient(86deg, #38be8c 0%, #05adbb 100%);
		border-radius: 44rpx;
		font-size: 30rpx;
		font-family: PingFang SC-Bold;
		font-weight: 700;
		text-align: center;
		color: #ffffff;
		line-height: 88rpx;
		letter-spacing: -1rpx;
		position: fixed;
		left: 40rpx;
		bottom: 74rpx;
	}
</style>
